<template>
  <div>
    <van-nav-bar title="健康管理" left-arrow @click-left="onClickLeft" />
    <van-search v-model="value" placeholder="搜医院、科室、疾病和症状" />
    <div class="h_top">
      <div class="h_top_f">
        <span class="h_left">按科室挂号</span>
        <div class="h_right">
          <a href="#">全部科室</a>
          <i class="iconfont icon-fangxiangzuo"></i>
        </div>
      </div>
      <div class="h_top_b">
        <a href="#" class="picture">
          <div class="iconfont icon-xiaoerfuke"></div>
          <span class="pic">妇科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-xinwaike"></div>
          <span class="pict">心外科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-pifuke"></div>
          <span class="pict">皮肤科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-xinzangke"></div>
          <span class="pict">心脏科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-guke"></div>
          <span class="pic">骨科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-xiaohuake"></div>
          <span class="pict">消化科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-huxike"></div>
          <span class="pict">呼吸科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-yanke"></div>
          <span class="pic">眼科</span>
        </a>
        <a href="#" class="picture">
          <div class="iconfont icon-jingshenwaike1"></div>
          <span class="pict">精神科</span>
        </a>
        <router-link to="/userItem" class="picture">
          <div class="iconfont icon-gengduo"></div>
          <span class="pic">更多</span>
        </router-link>
      </div>
    </div>
    <div class="reg">
      <div class="reg_l">
        <i class="iconfont icon-jilu1"></i>
        <span>挂号记录与放号提醒</span>
      </div>
      <div class="reg_r">
        <a href="#">查看</a>
        <i class="iconfont icon-fangxiangzuo"></i>
      </div>
    </div>
    <div class="middle">
      <div class="middle_l">
        <span class="middle_lf">不知道挂什么科室?</span>
        <p class="middle_ls">智能分诊，帮你找科室</p>
        <div class="middle_lt">
          <a href="#" class="middle_ltf">智能分诊</a>
          <i class="iconfont icon-fangxiangzuo"></i>
        </div>
      </div>
      <div class="middle_r">
        <span class="middle_lf">医生没号了？</span>
        <p class="middle_ls">线上问专家，快速寻求帮助</p>
        <div class="middle_rt">
          <a href="#" class="middle_ltf">线上问诊</a>
          <i class="iconfont icon-fangxiangzuo"></i>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="h_top_f">
        <span class="h_left">按医院挂号</span>
        <div class="h_right">
          <a href="#">全部12家医院</a>
          <i class="iconfont icon-fangxiangzuo"></i>
        </div>
      </div>
      <div class="sort">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <router-link to="/hospital" class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">三甲</span>
            <span class="hospital_rs">晋中市医院</span>
          </div>
          <span class="country">国家重点科室:妇科</span>
          <div class="country">省级重点科室:颈椎腰病科</div>
          <div class="">
            <span class="country">30.9km | 榆次区正太北路70号</span>
          </div>
        </router-link>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <div class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">三乙</span>
            <span class="hospital_rs">晋中市妇幼保健院</span>
          </div>
          <div class="">
            <span class="country">29.6km /山西省晋中市榆次区菜园西街76号</span>
          </div>
        </div>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <div class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">三甲</span>
            <span class="hospital_rs">山西省社会福利精神康宁医院</span>
          </div>
          <span class="country"
            >市级重点科室:心理障碍科（精神心理科），心理障碍科，精神分裂科，精神康复科</span
          >

          <div class="">
            <span class="country">4.5km | 山西省太谷县箕城西街康复路71号</span>
          </div>
        </div>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <div class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">三乙</span>
            <span class="hospital_rs">晋中市第二人民医院</span>
          </div>
          <span class="country"
            >市级重点科室:妇科,泌尿外科,骨科,血液肿瘤科,心血管内科,神经内科</span
          >
          <div class="">
            <span class="country">4.4km | 山西省晋中市太谷县康复路70号</span>
          </div>
        </div>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <div class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">二甲</span>
            <span class="hospital_rs">晋中市第三人民医院</span>
          </div>
          <span class="country">特色科室:病理科肿瘤内科</span>
          <div class="">
            <span class="country">78.9km | 山西省介休市新建西路23号</span>
          </div>
        </div>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <div class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">二甲</span>
            <span class="hospital_rs">榆次区妇幼保健院</span>
          </div>
          <span class="country"
            >市级重点科室:妇科,产科,儿科,儿童保健科,中医科,孕妇保健科</span
          >
          <div class="">
            <span class="country"
              >31.2km | 山西省晋中市榆次区龙湖大街141号</span
            >
          </div>
        </div>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <div class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">三甲</span>
            <span class="hospital_rs">榆次区中医院</span>
          </div>
          <span class="country"></span>
          <div class="">
            <span class="country">29.9km | 山西省晋中市中都路246号</span>
          </div>
        </div>
      </div>
      <div class="hospital">
        <div class="hospital_l">
          <span class="iconfont icon-yiyuan yiyuan"></span>
        </div>
        <div class="hospital_r">
          <div class="hospital_rt">
            <span class="hospital_rf">二甲</span>
            <span class="hospital_rs">介休市中医院</span>
          </div>
          <span class="country"></span>
          <div class="">
            <span class="country">78.2km | 山西省晋中市介休新建西路23号</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// JS
export default {
  data() {
    return {
      value: "",
      value1: 0,
      value2: "a",
      option1: [
        { text: "综合排序", value: 0 },
        { text: "按距离排序", value: 1 },
      ],
      option2: [
        { text: "筛选", value: "a" },
        { text: "医院等级", value: "b" },
        { text: "附近", value: "c" },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.replace("/");
    },
  },
};
</script>
<style>
.registration {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #409eff;
}
.registration_guli {
  position: relative;
  margin-left: 50%;
  right: 10%;
  font-size: 18px;
}
.go_back3 {
  position: absolute;
  left: 5px;
}
.icon-range-right {
  font-size: 22px;
}
.h_search {
  width: 96%;
  border-radius: 15px;
  margin: 5% 2% 0 2%;
  height: 20px;
  padding: 15px 15px;
  border: 1px solid green;
  border-radius: 10px;
  outline: none;
}
.h_top {
  width: 96%;
  height: 150px;
  border-radius: 15px;
  margin: 5px 2% 0 2%;
  background-color: #fff;
}
.h_top_f {
  height: 30px;
}
.h_top_b {
  height: 120px;
}
.h_left {
  float: left;
  margin-top: 7px;
}
.h_right {
  float: right;
  margin-top: 7px;
}
.picture {
  display: flex;
  flex-direction: column;
  flex: 1;
  float: left;
  width: 20%;
  height: 48%;
}
.h_top_bt {
  height: 50%;
}
.h_top_bb {
  height: 50%;
}
.icon-xiaoerfuke,
.icon-xinwaike,
.icon-pifuke,
.icon-xinzangke,
.icon-guke,
.icon-huxike,
.icon-xiaohuake,
.icon-yanke,
.icon-jingshenwaike1,
.icon-gengduo {
  font-size: 30px;
  padding: 5px 15px 0px;
}
.pic {
  padding: 0 0px 0px 15px;
}
.pict {
  padding: 0 0px 0px 8px;
}
.reg {
  width: 96%;
  border-radius: 8px;
  margin: 5px 2% 0 2%;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
}
.reg_l {
  float: left;
}
.icon-jilu1 {
  font-size: 16px;
  color: green;
}
.reg_r {
  float: right;
}
.middle {
  width: 96%;
  margin: 5px 2% 0 2%;
  height: 100px;
}
.middle_l {
  width: 48%;
  height: 100%;
  float: left;
  border-radius: 8px;
  background-color: #fff;
}
.middle_r {
  width: 49%;
  height: 100%;
  float: right;
  border-radius: 8px;
  background-color: #fff;
}
.middle_lf {
  display: block;
  height: 20px;
  width: 120px;
  font-size: 13px;
  font-weight: 700;
  margin: 10px 5px 0 0;
}
.middle_ls {
  height: 20px;
  width: 155px;
  font-size: 12px;
  color: #959595;
}
.middle_lt {
  width: 60%;
  height: 30%;
  text-align: center;
  line-height: 185%;
  border: 1px solid blue;
  border-radius: 15px;
  background-color: rgb(12, 183, 235);
  color: #fff;
  margin-top: 5px;
}
.middle_ltf {
  color: #fff;
}
.middle_rt {
  width: 60%;
  height: 30%;
  text-align: center;
  line-height: 185%;
  border: 1px solid blue;
  border-radius: 15px;
  background-color: #19df4b;
  color: #fff;
  margin-top: 5px;
}
.bottom {
  width: 96%;
  border-radius: 15px;
  margin: 5px 2% 0 2%;
  background-color: #fff;
}
.sort {
  margin-top: 10px;
  height: 30px;
  line-height: 30px;
  padding-bottom: 15px;
}
.sort_l {
  float: left;
  width: 50%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
.sort_r {
  float: right;
  vertical-align: middle;
  text-align: center;
  width: 50%;
  height: 100%;
}
.hospital {
  margin-top: 10px;
  width: 100%;
  height: 100px;
}
.hospital_l {
  float: left;
  width: 30%;
  line-height: 100px;
}
.yiyuan {
  display: block;
  font-size: 30px;
  text-align: center;
}
.yiyuan::before {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 20px;
  background-color: #15ecf1;
}
.hospital_r {
  float: left;
  display: block;
  width: 70%;
  height: 100px;
}
.hospital_rt {
  width: 100%;
  height: 20px;
}
.hospital_rs {
  font-size: 15px;
}
.hospital_rf {
  float: left;
  background-color: #3cbe3c;
  font-size: 12px;
  line-height: 20px;
  border-radius: 5px;
  color: #fff;
}
.country {
  margin-top: 5px;
  font-size: 12px;
  color: #ccc;
}
.van-nav-bar {
  background-color: #409eff;
}
.van-icon:before {
  display: contents;
}
</style>
